// vue3响应式原理是用proxy代替了Object.defineProperty()
// 为了解决vue2对有些数组和对象改变时，响应式失效的问题

const obj = {
  name: "zhangsan",
  age: 20,
  likes: ["c", "t", "r"],
};

// 里面是两个参数
// 第一个参数表示要监听的对象，第二个参数是描述对象
const proxy = new Proxy(obj, {
  // get方法有三个参数，第一个是对象本身，第二个参数是读取的属性，第三个是代理对象本身
  get(target, propKey) {
    // console.log(target, propKey, receiver);
    return target[propKey];
  },
  // set方法有4个参数，第一个是对象本身，第二个参数是要修改的属性，第三个参数是修改后的值,第四个是代理对象本身
  set(target, propKey, value) {
    target[propKey] = value;
    console.log(propKey + "的值改成了" + value);
  },
});

// 被proxy代理过之后，只能操作实例
console.log(proxy.name);
proxy.age = 30;
console.log(proxy.age);
proxy.likes = [...proxy.likes, "l"];
